<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.sql.*"%>
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
</head>


<%

	String base_path = request.getScheme()
		+ "://"
		+ request.getServerName()
		+ ":"
		+ request.getServerPort()
		+ request.getContextPath();

%>


<%@ page import="data.User" %>
<%@ page import="data.Author" %>
<%@ page import="servlet.UserServlet" %>


<style>
	* {
		-webkit-user-drag: none;
		-moz-user-drag: none;
		-ms-user-drag: none;
	}
</style>

<script src="./lib/jquery-3.6.3.js"></script>
<body style="overflow-x: hidden;">


	
	<script>
	
		
		$.ajax({url:"<%=base_path%>/ArticleServlet?getArticleInformationByCount=6",
			success:function(result){
				console.log(result.length);
				
				if(result.length == 0)
					return;
				
				let list_nt = document.getElementById("list_news_title");
				let list_na = document.getElementById("list_news_author");
				let list_nd = document.getElementById("list_news_date");
				let list_nc = document.getElementById("list_news_content");
				let temp_nc_item = document.getElementById("news_content_item_template").content.firstElementChild;
				
				
				for (let i = 0; i < result.length; i++)
				{
					let label_title = document.createElement("label");
					let label_author = document.createElement("label");
					let label_date = document.createElement("label");
					let a_content = temp_nc_item.cloneNode(true);
					
					label_title.innerHTML = result[i].title;
					label_author.innerHTML = result[i].author;
					label_date.innerHTML = result[i].date;
					a_content.setAttribute("id",result[i].id);
					
					list_nt.appendChild(label_title);
					list_na.appendChild(label_author);
					list_nd.appendChild(label_date);
					list_nc.appendChild(a_content);
				}
			}
		});
		
		
		
	</script>
	

	
	<div class="bar_top" style="height: 20vh;background-color: black;position: relative;margin:10px;">
    
    	<div class="logo" style="display:flex;">
    		<a href="./index.jsp">
    			<img alt="" src="./img/logo.png" style="height: 18vh;" />
    		</a>
    		<h1 style="font-size:xx-large;color:blue;margin:20px;">文章发布平台</h1>
    	</div>
    	
    	<p id="p_online_count" style="color:white;position: absolute;top:10vh;left:25%;">
    	
    	
    		<script type="text/javascript">
    			
	    		var count_online = 0;
	    		$.get("<%=base_path%>/UserServlet?get=ONLINE_COUNT",
	    				function(result){
	    					count_online = result;
	    			}
	    		);
	    		
	    		let p_online_count = document.getElementById("p_online_count");
				p_online_count.innerHTML = "在线人数：" + count_online;
		
	    	</script>
    	
    	</p>
    	
    	
    	<div class="menu">
    	
    		<ul style="list-style:none;color: white;">
    		
    			<li>
    			<a href="./index.jsp">首页</a>
    			</li>
    			<li>简介</li>
    			<li><a href="./pages/list_article.jsp">文章</a></li>
    			
    			<li id="li_login" ><a href="./pages/login.jsp">登录</a></li>
    			<li id="li_register"><a href="./pages/register.jsp">注册</a></li>
    			
    			<li id="li_myself" style="display:none;"><a href="./pages/myself.jsp">个人资料</a></li>
    			<li id="li_register_author" style="display:none;"><a href="./pages/register.jsp">注册作者</a></li>
    			<li id="li_works_manage" style="display:none;"><a href="./pages/works_manage.jsp">作品管理</a></li>
    			<li id="li_logout" style="display:none;"><a href="./index.jsp" onclick="logout()">[登出]</a></li>
    			
    		</ul>
    		
    		<style>
    			.menu {
    				position: absolute;
    				top: 10vh;
    				left: 60%;
    			}
    		
    			.menu li {
    				display: inline;
    				float:left;
    				margin: 2px;
    			}
    		</style>
    		
    		<script>
    			
	    	    if(<%=state_login%>)
	    		{
	    	    	document.getElementById("li_login").style.display = "none";
	    			document.getElementById("li_register").style.display = "none";
	    			document.getElementById("li_myself").style.display = "block";
	    			document.getElementById("li_register_author").style.display = "block";
	    			document.getElementById("li_logout").style.display = "block";
	    		}
        
	    	    if (<%=is_author%>)
	    	    {
	    	    	document.getElementById("li_register_author").style.display = "none";
	    	    	document.getElementById("li_works_manage").style.display = "block";
	    	    }
	    	    
    			function logout()
    			{
    				if(<%=state_login%> == true)
    				{
    					$.post(
    						"<%=base_path%>/UserServlet",
    						{type:"<%=UserServlet.PostValue.LOGOUT.toString()%>"},
    						function (result){
    							alert(result);
    						}
    					);
    				}
    			}
	    	    
	    	    
    		</script>
    	
    	</div>
    	
    	
    
    </div>
    
    
    
    
    

	<div class="slider" style="height: 60vh;position: relative;">
	
		<div class="content">
		
			
			<img class="slide_img" alt="img1" src="./img/img1.png" style="display: block;" />
			<img class="slide_img" alt="img2" src="./img/img2.png" style="display: none;" />
			<img class="slide_img" alt="img3" src="./img/img3.png" style="display: none;" />

			<img id="slide_prev" alt="prev" src="./img/next.png"
			style="
				transform: scaleX(-1);
				z-index: 1;
				position: absolute;
				width: 5%;
				top: 50%;
				left: -1%;
				"
				/>
			<img id="slide_next" alt="next" src="./img/next.png"
			style="
				z-index: 1;
				position: absolute;
				width: 5%;
				top: 50%;
				left: 96%;
				"
				/>
			

			<style>
				@keyframes slide_out {
					from
					{
						opacity: 1;
						right: 0%;
					}
					to
					{
						opacity: 0;
						right: 99%;
						animation-name: none;
						display: none;
					}
				}
				
				@keyframes slide_in {
					from
					{
						left: 99%;
						display: block;
					}
					to
					{
						left: 0%;
						animation-name: none;
					}
				}

				.slide_img {
					width: 100%;
					height: 60vh;
					position: absolute;
				}
				
			</style>
			
			
		</div>
		
		
		
	
	</div>
	
	
	<script src="./js/slider.js"></script>
	

	
	

	<div class="news" style="position: relative;">
		<div style="position: absolute;left: 50%;">
			<label style="font-size:large;">文章</label>
	    	<div style="background-color: grey;height:10px;width: 500px;">
	    		<div style="background-color: blue;width: 100px;height: 10px;"></div>
	    	</div>
	    	
	    	<div class="list" style="display:flex;">
	    		
    			<div id="list_news_title">
    			文章标题
    			
    			
    			</div>
    			<div id="list_news_author">
    			作者
    			
    			</div>
    			<div id="list_news_date">
    			上传日期
    			
    			
    			</div>
    			<div id="list_news_content">
    			内容
    				<template id="news_content_item_template">
    					<a id="0" href="./pages/article.jsp" onclick="clickNewsContentLabel(this);return false;">详情</a>
    				</template>
    				
    			</div>
    		
	    		<style>
	    		
	    			.list div {
	    				background-color: blue;
	    				color: white;
	    				font-align: center;
	    				margin: 10px;
	    				display: flex;
	    				flex-direction: column;
	    			}
	    			
	    			.list div label{
	    				background-color: white;
	    				color: black;
	    			}
	    			
	    			.list div a {
	    				background-color: white;
	    				color: green;
	    			}
	    		</style>
	    		
	    		<script>
		    		function clickNewsContentLabel(element)
		    		{
		    			
		    			/*
		    			$.ajax({url:"<%=base_path%>/ArticleServlet?getArticleByID=" + element.getAttribute("id"),
		    				success:function(result){
		    					document.getElementById("news_title").innerHTML = result.title;
		    					document.getElementById("news_author").innerHTML = "作者：" + result.author;
		    					document.getElementById("news_date").innerHTML = "日期：" + result.date;
			    				document.getElementById("news_content").innerHTML = result.content + "\r\n\r\n";
		    				}
		    			});
		    			*/
		    			
		    			window.location.href = "<%=base_path%>/ArticleServlet?getArticleByID=" + element.getAttribute("id");
		    		}
		    		
		    		
	    		</script>
	    	</div>
		</div>
    	
    	<span id="news_container" style="white-space: pre-line;">
	    	<label id="news_title" style="font-size:xx-large;margin: 1%;"></label>
	    	<span style="display: flex;font-size: small;color:grey;">
	    		<label id="news_author" style="margin: 1%;"></label>
	    		<label id="news_date" style="margin: 1%;"></label>
	    	</span>
	    	<label id="news_content" style="position:relative;bottom:20px;text-align:center;font-size:middle;"></label>
    	</span>
    	
    	
    	
    </div>
    
    
	<div class="bar_bottom" style="height: 10%; background-color: black; display:block;">
    
    	
    
    </div>



</body>



</html>









